import React, { useContext, useEffect, useImperativeHandle, useReducer, useRef, useState } from 'react'


const Child = React.forwardRef((props, ref)=>{

  const [count,setCount] = useState(100)
  function add(){
    setCount(count + 1)
  }
  // useImperativeHandle 该 hooks 可以让我们使用 ref 的时候自定义暴露给父组件的内容
  // 暴露的内容可以是一个状态也可以是一个函数
  useImperativeHandle(ref, ()=>{
    return {
      name: '小雨',
      sex: '男',
      age: 18,
      count,
      add
    }
    // [] 中的内容为依赖项，当依赖项被改变时，会重新给父组件暴露内容
  },[count])

  return (<>
  <div>
    Child
    <button onClick={()=>{
      setCount(count + 1)
    }}>{count}点击加 1</button>
  </div>
  </>)
})

const App = () => {

    const chiRef = useRef(null)

    return (
    <div >
       <Child ref={chiRef} />
       <button onClick={()=>{
        console.log(chiRef.current);
        chiRef.current.add()
       }}>点击获取 ref</button>
    </div>
  )
}

export default App